import { Button, Form, Input, message, Modal ,Select} from 'antd'
import React, { useEffect } from 'react'
import api from '../../../http/index'
import { DATASOURCE_TYPE_LIST } from '../constant'

const { Item } = Form
const { Option } = Select

const layout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
}

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
}

const EditDialog = (props) => {
  const { current = {}, isShow, oncloseFun, handleRefresh } = props
  const [messageApi, contextHolder] = message.useMessage()

  const handleCancel = () => {
    oncloseFun && oncloseFun()
  }

  const [form] = Form.useForm()

  useEffect(() => {
    if (current) {
      form.setFieldsValue(current)
    }else{
      form.resetFields()
    }
  }, [isShow,current,form])

  const onFinish = (values) => {
    doAddHandler(values)
  }

  // 编辑、新增规则
  const doAddHandler = (value) => {
    try {
      const params = { ...current, ...value }
      const newApi = params.uuid
        ? api.DatasourceApi.update
        : api.DatasourceApi.add
      newApi(params)
        .then((data) => {
          if (data.code !== 200) {
            messageApi.error(data.message)
            return
          }
          messageApi.success(params.uuid ? '编辑成功' : '新增成功')
          handleCancel()
          handleRefresh()
        })
        .catch((err) => {})
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <>
      <Modal
        title="数据源配置"
        open={isShow}
        footer={null}
        onCancel={handleCancel}
        style={{
          minWidth: 650,
        }}
      >
        <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
          <Item
            name="name"
            label="数据源名称"
            rules={[
              {
                required: true,
                message: '请输入',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Item>
          <Item
            name="type"
            label="类型"
            rules={[
              {
                required: true,
                message: '请选择类型',
              },
            ]}
          >
            <Select placeholder="选择类型" allowClear>
              {DATASOURCE_TYPE_LIST.map((item, i) => (
                <Option value={item.value} key={i}>
                  {item.label}
                </Option>
              ))}
            </Select>
          </Item>
          <Item
            name="driverClassName"
            label="驱动名称"
            rules={[
              {
                required: true,
                message: '请输入',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Item>
          <Item
            name="username"
            label="登录名"
            rules={[
              {
                required: true,
                message: '请输入',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Item>
          <Item
            name="password"
            label="登录密码"
            rules={[
              {
                required: true,
                message: '请输入',
              },
            ]}
          >
            <Input.Password placeholder="请输入" />
          </Item>

          <Item
            name="url"
            label="url"
            rules={[
              {
                required: true,
                message: '请输入',
              },
            ]}
          >
            <Input.TextArea placeholder="请输入" />
          </Item>
          <Item {...tailLayout}>
            <Button htmlType="button" onClick={handleCancel}>
              取消
            </Button>
            <Button type="primary" htmlType="submit" style={{ marginLeft: 15 }}>
              确定
            </Button>
          </Item>
        </Form>
      </Modal>
      {contextHolder}
    </>
  )
}

export default EditDialog
